<template>
	<view class="container-c" :style="'background-image: url(' + currentItem.bg_url + '); background-size: 100% auto; background-repeat: no-repeat;'">
		<!--m删除 <scroll-view scroll-x>
			<view class="header">
				<view v-for="(item, index) in module.tags" class="item" :key="index"
					:class="{active: currentTabIndex === index}" @tap="selectTab(index)">
					<view>{{item}}</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view> -->
		
		<view class="list-c" @touchstart="start" @touchend="end">
			<ActivityList :refreshCounter="refreshCounter + currentTabIndex" :getNextPageCounter="getNextPageCounter"
				:ids="currentItem.list" :module="currentItem" />
		</view>
		<!-- <swiper>
			<swiper-item v-for="(item, index) in module.list">
				<ActivityList :refreshCounter="refreshCounter" :getNextPageCounter="getNextPageCounter" :ids="item.list" :module="item" />
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	export default {
		props: {
			module: {
				type: Object,
				default () {
					return {

					}
				}
			},
			refreshCounter: Number,
			getNextPageCounter: Number
		},
		data() {
			return {
				currentTabIndex: 0,
				startData: {
					clientX: '',
					clientY: ''
				}
			}
		},
		computed: {
			currentItem() {
				return this.module.list[this.currentTabIndex]
			}
		},
		mounted() {},
		watch: {},
		methods: {
			selectTab(index) {
				this.currentTabIndex = index
			},
			scrollToRight() {
				// 右滑
				if (this.currentTabIndex < (this.module.tags.length - 1)) {
					this.currentTabIndex = this.currentTabIndex + 1
					console.log(this.currentTabIndex)
				}
				else {
					uni.showToast({
						title: '没有更多了~',
						icon: 'none'
					})
				}
			},
			scrollToLeft() {
				// 左滑
				if (this.currentTabIndex > 0) {
					this.currentTabIndex = this.currentTabIndex - 1
				}
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				// console.log(e)
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subX > 50) {
					// 左滑
					this.scrollToLeft()
				} else if (subX < -50) {
					// 右滑
					this.scrollToRight()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-c {
		margin-top: 10rpx;
	}

	.header {
		display: flex;
		// flex-wrap: wrap;
		align-items: center;
		white-space: nowrap;

		.item {
			margin-right: 20px;
			font-weight: bold;

			&.active {
				color: #eea13d;
				font-size: 32rpx;

				.line {
					width: 50rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background: #eea13d;
					margin: 0rpx auto;
				}
			}
		}
	}

	.list-c {
		margin-top: 20rpx;
	}
</style>
